<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="角色管理" name="first">
            <el-button
              style="margin-bottom: 30px"
              type="primary"
              @click="addHandler"
            >新增角色</el-button>
            <!-- 表格 -->
            <el-table :data="rowList" style="width: 100%">
              <el-table-column label="序号" type="index" width="150" />
              <el-table-column label="角色名" width="280">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="描述">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.description
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="success"
                    size="mini"
                    @click="handlePer(scope.row.id)"
                  >分配权限</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              style="margin-top: 40px"
              background
              layout="prev, pager, next"
              :page-size="pageParams.pagesize"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">公司信息</el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 新增弹框 -->
    <el-dialog :title="isEdit ? '编辑' : '添加'" :visible.sync="showDialog">
      <rolrDia
        v-if="showDialog"
        :visible.sync="showDialog"
        :row="row"
        :is-edit="isEdit"
        @success="loadRoles"
      />
    </el-dialog>
    <!-- 权限 -->
    <el-dialog title="分配角色" :visible.sync="roleShowDialog">
      <setDia v-if="roleShowDialog" ref="setDia" />
    </el-dialog>
  </div>
</template>

<script>
import { getRoles, deleteRole } from '@/api/setting'
import rolrDia from './roleDia.vue'
import setDia from './setDia.vue'

export default {
  components: {
    rolrDia,
    setDia
  },
  data() {
    return {
      activeName: 'first',
      rowList: [],
      pageParams: {
        page: 1,
        pagesize: 5
      },
      total: 0, // 总的数据条数
      showDialog: false,
      roleShowDialog: false,
      isEdit: false,
      row: {}
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    handleEdit(row) {
      // console.log(index, row)
      this.showDialog = true
      this.isEdit = true
      this.row = row
    },
    addHandler() {
      this.showDialog = true
      this.isEdit = false
    },
    handleDelete(id) {
      // console.log(id)
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteRole(id)
          // console.log(res)
          if (res.code !== 10000) return
          if (this.rowList.length <= 1) {
            if (this.total === 0) {
              this.pageParams.page = 1
              return
            }
            this.pageParams.page--
          }
          this.loadRoles()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async loadRoles() {
      const res = await getRoles(this.pageParams)
      // console.log(res)
      if (res.code !== 10000) return
      this.rowList = res.data.rows
      this.total = res.data.total
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pageParams.page = val
      this.loadRoles()
    },
    handlePer(id) {
      // console.log(row)
      this.roleShowDialog = true
      this.$nextTick(() => {
        this.$refs.setDia.id = id
      })
    }
  }
}
</script>
